<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Table Page Nav Library Test</title>
    <script src="libtabpagenav.js" language="javascript"></script>
    <link rel="stylesheet" href="tabpagnav.css" type="text/css" />
</head>
<body>
    <style>
        body{
        	font-family: Helvetica, Arial;
        }
        
        th.fieldA{
            color: #111;
        }
        
        th.fieldB{
            color: #333;
        }
        
        th.fieldC{
            color: #555;
        }
        
        th.fieldD{
            color: #777;
        }
        
        th.fieldE{
            color: #999;
        }
    </style>
    <h1>Accessible Table Page Navigation Library</h1>
    <h2>Version 2.1.1-testing</h2>
	<hr/>
	<table id="myTable" class="tabPageNav" cellpadding="0" cellspacing="0">
		<thead>
			<tr>
				<th>#</th>
				<th class="fieldA">Field A</th>
				<th class="fieldB">Field B</th>
				<th class="fieldC">Field C</th>
				<th class="fieldD">Field D</th>
				<th class="fieldE">Field E</th>
			</tr>
		</thead>
		<tbody>
<?php
                $arrColors = array(0 => '#FCC', '#FCF', '#FFC', '#CFF', '#CFC', '#CCF');
                $intColorMaxIndex = count($arrColors) - 1;
                
                for($intC = 1; $intC<=43; $intC++){
                    
                    echo "<tr>\n";
                    
                    $arrFieldValues = array(
                                            'A' => str_pad(rand(0,65536), 5, '0', STR_PAD_LEFT),
                                            'B' => str_pad(rand(0,65536), 5, '0', STR_PAD_LEFT),
                                            'C' => str_pad(rand(0,65536), 5, '0', STR_PAD_LEFT),
                                            'D' => str_pad(rand(0,65536), 5, '0', STR_PAD_LEFT),
                                            'E' => str_pad(rand(0,65536), 5, '0', STR_PAD_LEFT),
                                           );
                    
                    /*
                     * Field 1: hidden field not defined, tag content is used for ordering
                     */
                    echo "\t<td>$intC</td>\n";
                    
                    /*
                     * Other fields: hidden field with name libTabPageNavVFO is defined, so ordering use value content to order this field
                     */
                    foreach($arrFieldValues as $key=>$val){
                    	echo "\t<td>\n" .
                                "\t\t<span style=\"background-color: " . $arrColors[rand(0,$intColorMaxIndex)] . "\">($val, $key)</span>\n" .
                                "\t\t<input type=\"hidden\" name=\"libTabPageNavVFO\" value=\"$val,$key\" />\n" .
                             "\t</td>\n";
                    }
                    
                    echo "</tr>\n";
                }
            ?>
		</tbody>
	</table>
    <script language="JavaScript" type="text/javascript">
        var objPageNavTable = new PageNavTable();
        objPageNavTable.init('objPageNavTable', 'testTbl', 12, true);
        objPageNavTable.loadFromTable('myTable', true);
        objPageNavTable.draw();
    </script>
</body>
</html>